<template>
  <h1 style="color: green; text-align: center">这里是home父组件 , 他们调用一个子组件</h1>
  <!-- query  刷新页面,地址栏参数不保存,地址栏不可见 必须在router.ts配置name -->

  <el-button type="primary" @click="$router.push({ path: '/about', query: { id: 666 } })"
    >{{ $route.params.id }}----跳转 about</el-button
  >
  <!-- 子组件 Start -->
  <comm-table-pagination
    :tableData="tableData"
    :tableHeader="tableHeader"
    :isOperate="isOperate"
    :total="total"
    :operateWidth="operateWidth"
    @handleSizeChange="onHandleSizeChange"
    @handleCurrentChange="onHandleCurrentChange"
  >
    <template v-slot:btn>
      <el-button type="success" size="small" @click="$router.push('/about')"
        >跳转 about页面</el-button
      >
      <el-button link type="success" size="small">Edit</el-button>
      <el-button link type="success" size="small">Edit</el-button>
      <el-button link type="success" size="small">Edit</el-button>
      <el-button link type="success" size="small">Edit</el-button>
    </template>
  </comm-table-pagination>
  <!-- 子组件 End -->
</template>

<script setup>
import commTablePagination from "@/components/commTable.vue";
import { reactive, ref, onMounted } from "vue";

// 表格所需的数据
const tableData = reactive([
  {
    id: 1,
    title: "我是title活在风浪里我是title活在风浪里",
    status: "启动",
    docAuthor: "zhangshan",
    submitTime: "2020-06-06 23:58:49",
  },
  {
    id: 2,
    title: "我是title活在风浪里我是title活在风浪里",
    status: "禁用",
    docAuthor: "zhangshan",
    submitTime: "2020-06-07 00:10:59",
  },
  {
    title: "我是title活在风浪里我是title活在风浪里",
    status: "启动",
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    title: "我是title活在风浪里我是title活在风浪里",
    status: "启动",
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    title: "我是title活在风浪里我是title活在风浪里",
    status: "启动",
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    title: "我是title活在风浪里我是title活在风浪里",
    status: "启动",
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
]);
// 表头数据  辅助tableData的数据 这里是自己定义

const tableHeader = reactive([
  {
    type: "index",
    label: "#",
    fixed: true,
    width: "60px", // 宽度 不指定会 自适应屏幕铺满
  },
  {
    prop: "title",
    label: "稿件名称",
    overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    sortable: true,
  },
  {
    prop: "status",
    label: "稿件状态",
    sortable: true,
  },
  {
    prop: "docAuthor",
    label: "作者",
  },
  {
    prop: "submitTime",
    label: "提交日期",
    sortable: true, // 是否可排序
    align: "left", // 对齐方式
    width: "120px", // 最小宽度
    width: "200px",
  },
]);
const operateWidth = ref(160); // 操作列宽度
const isOperate = ref(true); // 操作列是否显示
const pageSize = ref(10); // 每页显示条数
const pageNum = ref(2); // 当前页码
const total = ref(100); // 总条数
// 分页改变事件
const onHandleSizeChange = (val) => {
  pageSize.value = val;
  // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
};
// 当前页改变事件
const onHandleCurrentChange = (val) => {
  pageNum.value = val;
  // getData(); 以上数据来自接口，这里是模拟数据，如果是真实数据页数变了，需要再次调用请求后台的接口，重新刷新页面
};
</script>
